<template>
	<view class="content">
		<u-form
			ref="uForm"
			label-width="200"
			class="formStyle">
			<view class="oneCard">
				<view class="line-view">
					<uni-data-select
						v-model="factoryId"
						:localdata="factorieList"
						placeholder="选择工厂"
						@change="factoryIdChange"></uni-data-select>
				</view>

				<view class="line-view">
					<u-input
						border
						v-model="stockPalaceId"
						:inputBorder="false"
						:focus="canFocus"
						@focus="stockPalaceId = ''"
						placeholder="仓位扫描"
						@confirm="confirmStockPalaceId" />
				</view>
				<view
					class="line-view"
					v-if="stockInfo.id">
					<view class="line-value">仓位名称：{{ stockInfo.name }}</view>
				</view>

				<view class="line-view">
					<u-input
						border
						v-model="productCode"
						:inputBorder="false"
						:focus="canFocus1"
						@focus="productCode = ''"
						placeholder="扫描条码"
						@confirm="confirmGoods" />
				</view>
			</view>
			<view class="flexFull">
				<view
					v-for="(item, index) in displayedProjects"
					:key="index"
					class="oneCard">
					<u-form-item label="">
						<view
							style="margin-left: auto"
							@click="delInfo(item.productCode)">
							<uni-icons
								style="margin-left: auto"
								type="trash-filled"
								size="25"></uni-icons>
						</view>
					</u-form-item>
					<u-form-item label="物料代码:">{{ item.productCode }}</u-form-item>
					<u-form-item label="物料名称:">{{ item.productName }}</u-form-item>
					<u-form-item label="规格型号:">{{ item.productModel }}</u-form-item>
					<!-- 同种物料不同批次，下面循环 -->
					<view
						v-for="(itemLit, indexLit) in item.innerList"
						:key="indexLit"
						class="oneLit">
						<u-form-item
							label="批号:"
							label-width="135">
							{{ itemLit.barcode }}
						</u-form-item>
						<u-form-item
							label="数量"
							label-width="135">
							<!-- <u-number-box
                v-model="itemLit.availableQuality"
                input-width="120" :max="Number(itemLit.quality)"></u-number-box> -->
							<uni-easyinput
								style="padding: 5rpx 0"
								v-model="itemLit.availableQuality"
								type="number"
								placeholder="请填写数量"
								@blur="inputChange(index)" />
						</u-form-item>
						<u-form-item
							label="辅助数量"
							label-width="135"
							v-if="itemLit.auxUnitId">
							<uni-easyinput
								style="padding: 5rpx 0"
								v-model="itemLit.auxAvailableQuality"
								type="number"
								placeholder="请填写辅助数量"
								@blur="inputChange(index)" />
						</u-form-item>
					</view>
				</view>
			</view>
		</u-form>
		<!-- 
		<view class="btn-view" style="padding: 25rpx">
			<button type="primary" @click="$u.throttle(subAll, 1000)">
				移库上架
			</button>
		</view> -->

		<view class="btn-view">
			<uni-pagination
				:current="page"
				:total="formModel.length"
				:show-icon="false"
				@change="pageChange"
				:pageSize="pageSize"
				style="width: 720rpx; margin: 0 auto; margin-bottom: 10rpx" />
			<view
				class="submit-button"
				@click="$u.throttle(subAll, 1000)">
				移库上架
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			page: 1,
			pageSize: 5,
			scrollTop: 0,
			projectInfo: [],
			productCode: null,
			stockInfo: {},
			stockPalaceId: null,
			factoryId: null,
			factorieList: [],
			canFocus: false,
			canFocus1: false,
			scanSearchIn: '',
			inObj: {},
			goodsCode: '',
			formModel: [],
			oldFactoryId: null, //保存的id
		};
	},
	onLoad() {
		that = this;
		that.getList();
	},
	computed: {
		displayedProjects() {
			const list = that.$u.deepClone(this.formModel);
			const start = (this.page - 1) * this.pageSize;
			const end = start + this.pageSize;
			return list.slice(start, end);
		},
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		inputChange(e) {
			const list = that.$u.deepClone(this.formModel);
			const loop = that.$u.deepClone(this.displayedProjects[e]);
			for (let i = 0; i < list.length; i++) {
				if (list[i].productCode == loop.productCode) {
					list[i] = loop;
				}
			}
			this.formModel = that.$u.deepClone(list);
		},
		delInfo(e) {
			uni.showModal({
				title: '提示',
				content: '是否删除该条数据？',
				success: function (res) {
					if (res.confirm) {
						const list = that.$u.deepClone(that.formModel);
						for (let i = 0; i < list.length; i++) {
							if (list[i].productCode == e) {
								list.splice(i, 1);
							}
						}
						that.formModel = that.$u.deepClone(list);
					}
				},
			});
		},
		pageChange(e) {
			that.page = e.current;
		},
		factoryIdChange(e) {
			if (e != that.oldFactoryId && that.formModel.length > 0) {
				uni.showModal({
					title: '提示',
					content: '选择工厂会清空已扫描内容,是否继续?',
					success: function (res) {
						if (res.confirm) {
							// 点确定
							that.oldFactoryId = e;
							that.formModel = [];
							that.stockInfo = [];
							that.stockPalaceId = null;
							that.canFocus = false;
							setTimeout(function () {
								that.$nextTick(function () {
									that.canFocus = true;
								});
							}, 100);
						} else if (res.cancel) {
							that.canFocus = false;
							setTimeout(function () {
								that.$nextTick(function () {
									that.canFocus = true;
									that.factoryId = that.oldFactoryId;
								});
							}, 100);
							return false;
						}
					},
				});
			} else {
				that.canFocus = false;
				setTimeout(function () {
					that.$nextTick(function () {
						that.canFocus = true;
					});
				}, 100);
				that.oldFactoryId = e;
				that.stockPalaceId = null;
			}
		},
		getList() {
			that.$u.post('/wms/mobile/api/getFactories', {}).then((res) => {
				const list = res.data;
				for (const item of list) {
					item.text = item.name;
					item.value = item.id;
				}
				that.factorieList = list;
			});
		},
		confirmIn(e) {
			// 根据仓位code查询库存
			if (!this.scanSearchIn) {
				return;
			}

			this.$u
				.get('/wms/mobile/api/getStockPalace', {
					code: e,
					factoryId: that.factoryId,
				})
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						return;
					}
					this.inObj = res.data;
				});
		},
		confirmStockPalaceId(e) {
			if (!that.factoryId) {
				this.$refs.uToast.show({
					title: '请选择工厂',
					type: 'error',
				});
				return;
			}
			this.$u
				.get('/wms/mobile/api/getStockPalace', {
					code: e,
					factoryId: that.factoryId,
				})
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						this.canFocus = false;
						this.$nextTick(function () {
							this.canFocus = true;
						});
						return false;
					}
					if (that.formModel && that.formModel.length > 0) {
						if (that.formModel[0].innerList[0].stockId !== res.data.stockId) {
							this.$refs.uToast.show({
								title: '不能同时移多个仓库的物料',
								type: 'error',
							});
							return false;
						}
					}
					that.stockInfo = res.data;
					this.canFocus1 = false;
					this.$nextTick(function () {
						this.canFocus1 = true;
					});
				})
				.catch((err) => {
					this.canFocus = false;
					this.$nextTick(function () {
						this.canFocus = true;
					});
				});
		},
		// 扫描物料
		confirmGoods(e) {
			if (!that.factoryId) {
				this.$refs.uToast.show({
					title: '请选择工厂',
					type: 'error',
				});
				return;
			}
			if (!that.stockInfo.id) {
				this.$refs.uToast.show({
					title: '请扫描仓位',
					type: 'error',
				});
				return;
			}
			if (!e) {
				return;
			}
			console.log(that.formModel);
			if (that.formModel.length > 0) {
				for (const item of that.formModel) {
					for (const items of item.innerList) {
						if (items.barcode == e) {
							this.canFocus1 = false;
							this.$nextTick(function () {
								this.canFocus1 = true;
							});
							return that.$u.toast('该物料已存在');
						}
					}
				}
			}

			this.$u
				.get('/wms/mobile/api/getOnShelfMaterial', {
					barcode: e,
					stockPositionId: that.stockInfo.id,
					factoryId: that.factoryId,
				})
				.then((res) => {
					this.canFocus1 = false;
					this.$nextTick(function () {
						this.canFocus1 = true;
					});
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						this.canFocus1 = false;
						this.$nextTick(function () {
							this.canFocus1 = true;
						});
						return false;
					}

					if (this.formModel.length === 0) {
						const obj = {
							productCode: res.data.productCode,
							productModel: res.data.productModel,
							productName: res.data.productName,
							innerList: [res.data],
						};
						obj.innerList[0].maxNumber = res.data.quality;
						this.formModel = [this.$u.deepClone(obj)];
					} else {
						let joinCan = false;
						let listIndex = null;

						this.formModel.forEach((item, index) => {
							if (item.productCode === res.data.productCode) {
								listIndex = index;
								joinCan = true;
							}
						});
						if (joinCan) {
							const listClone = [...this.formModel];
							listClone[listIndex].innerList.push(res.data);
							this.formModel = listClone;
						} else {
							const listClone = [...this.formModel];
							const obj = {
								productCode: res.data.productCode,
								productModel: res.data.productModel,
								productName: res.data.productName,
								innerList: [res.data],
							};
							obj.innerList[0].maxNumber = res.data.quality;
							listClone.unshift(this.$u.deepClone(obj));
							this.formModel = listClone;
						}
					}
				})
				.catch((err) => {
					this.canFocus1 = false;
					this.$nextTick(function () {
						this.canFocus1 = true;
					});
				});
		},
		subAll() {
			let listClone = JSON.parse(JSON.stringify(this.formModel));
			if (listClone.length == 0) {
				this.$refs.uToast.show({
					title: '请扫描物料！',
					type: 'error',
				});
				return;
			}
			let listPar = [];
			for (const items of listClone) {
				for (const item of items.innerList) {
					if (Number(item.availableQuality) > item.maxNumber) {
						uni.showToast({
							icon: 'none',
							title: item.productCode + '超出可填写数量' + item.maxNumber,
						});
						return false;
					}

					if (Number(item.availableQuality) < 0) {
						uni.showToast({
							icon: 'none',
							title: item.productCode + '输入数量不能小于0',
						});
						return false;
					}

					listPar.push(item);
				}
			}
			this.$u
				.post('/wms/mobile/api/inventoryManualTransfer', listPar)
				.then((res) => {
					if (res.code != 0) {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						});
						return false;
					}
					this.$refs.uToast.show({
						title: '移库成功！',
						type: 'success',
						callback: () => {
							uni.navigateBack({
								delta: 1,
							});
						},
					});
				});
		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
	padding-bottom: 150rpx;
}

.content {
	height: 100%;
}

.oneCard {
	padding: 15rpx 25rpx;
	border-radius: 10rpx;
	background-color: #fff;
	margin-bottom: 15rpx;
}

.btnRow {
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.u-form-item {
	padding: 0 0;
}

.formStyle {
	display: flex;
	flex-flow: column;
	height: calc(100% - 80rpx);
}

.oneLit {
	padding: 0 0 0 20rpx;
}

.flexFull {
	flex: 1;
	overflow-y: auto;
}

.line-view {
	padding: 10rpx 0;
	font-size: 30rpx;
}

button {
	padding: 0;
	margin: 0;
	background-color: #3067e8;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 96%;
	border-radius: 15rpx;
	height: 80rpx;
	font-size: 38rpx;
}

.btn-view {
	width: 750rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	padding-top: 8rpx;

	.submit-button {
		background-color: #3067e8;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 8rpx auto;
		width: 96%;
		border-radius: 15rpx;
		height: 80rpx;
		font-size: 38rpx;
	}
}
</style>
